<template>
  <div class="wallet-container container">
    <div class="left-info card">
      <div :class="['user-card', `level-${info.typeValue}`]">
        <img :src="require(`@/assets/images/wallet/level/bg-${info.memberType}.png`)" alt="" class="card-bg" v-if="info.memberType">
        <img src="@/assets/images/wallet/avatar.png" alt="" class="avatar">
        <div class="user-info">
          <div class="name">{{ info.memberName }}
            <img :src="require(`@/assets/images/wallet/level/label-${info.memberType}.png`)" alt="" v-if="info.memberType">
          </div>
          <div class="member-number fz-12">{{ info.memberNumber }}</div>
        </div>
      </div>
      <div class="online-cell">
        <div class="cell">
          <div class="label">上网区域</div>
          <div class="value">{{ info.areaName }}</div>
        </div>
        <div class="cell">
          <div class="label">当前费率</div>
          <div class="value">{{ info.price }}元/小时</div>
        </div>
        <div class="cell">
          <div class="label">机器号码</div>
          <div class="value">{{ info.deviceNumber }}</div>
        </div>
        <div class="cell">
          <div class="label">上机时间</div>
          <div class="value">{{ info.onlineTime ? dateFormat(info.onlineTime, 'MM-dd hh:mm'): '--' }}</div>
        </div>
        <div class="cell">
          <div class="label">上网时长</div>
          <div class="value">{{ times }}</div>
        </div>
        <div class="cell">
          <div class="label">本次消费</div>
          <div class="value">{{ info.consumption }}元</div>
        </div>
        <div class="cell">
          <div class="label">消费模式</div>
          <div class="value">
            <div v-if="info.entriesId">
              <div>{{ info.entriesName }}</div>
              <div class="color-red">{{ info.endTime }}结束</div>
            </div>
            <template v-else>普通消费</template>
          </div>
        </div>
      </div>
      <div class="balance-picture">
        <div class="money-bg">
          <div>卡上余额 <span class="money-number">{{ info.balance }}</span></div>
          <button class="recharge-btn" @click="rechargeShow = true">充值<i class="iconfont icon-arrow"/></button>
        </div>
        <div class="money-bottom">
          <div>本金 <span class="money-number">{{ info.availMoney }}</span></div>
          <div>赠送 <span class="money-number">{{ info.presentedMoney }}</span></div>
        </div>
      </div>
      <div class="nav-group">
        <div class="item" @click="checkOut">
          <img src="@/assets/images/wallet/icon-wallet.png" alt="">
          <div>结账</div>
        </div>
        <div class="item" @click="toPage('/wallet/consumeRecord')">
          <img src="@/assets/images/wallet/icon-log.png" alt="">
          <div>消费记录</div>
        </div>
        <div class="item" @click="toPage('/wallet/coupon')">
          <img src="@/assets/images/wallet/icon-coupon.png" alt="">
          <div>优惠券</div>
        </div>
      </div>
    </div>
    <div class="center card">
      <div class="center-body">
        <Carousel v-model="carouselIndex"
                  loop
                  autoplay
                  radius-dot
                  :autoplay-speed="2500"
                  :height="220" class="carousel-box">
          <CarouselItem v-for="item in bannerList" :key="item.id">
            <div class="img">
              <img :src="item.imgUrl" alt=""/>
            </div>
          </CarouselItem>
        </Carousel>
        <div class="recruit-card"/>
        <div class="qrcode-box">
          <div class="item" v-for="(item, index) in qrcodeList">
            <c-image :url="item.url" width="80px" height="80px"/>
            <div class="name">
              <img :src="qrcodeTypes[item.type].img" alt="">
              <div class="label">{{ qrcodeTypes[item.type].label }}</div>
              <div class="tips"><span class="iconfont icon-arrowleft"/>{{item.type == 2 ? '扫码使用': '扫码关注'}}</div>
            </div>
          </div>
          <div class="item">
            <c-image :url="require('@/assets/images/wallet/dy_qrcode.png')" width="80px" height="80px"/>
            <div class="name">
              <img src="@/assets/images/wallet/icon-dy.png" alt="">
              <div class="label">电竞蜂创始人</div>
              <div class="tips"><span class="iconfont icon-arrowleft"/>扫码关注</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-ranking card">
      <img src="@/assets/images/wallet/ranking-title.png" alt="" class="title-img">
      <div class="top-three" v-if="rankingTop.length">
        <div class="item item-2">
          <div class="name">{{ rankingTop[1].name }}</div>
          <div class="money">{{ rankingTop[1].money }}</div>
          <div class="label">充值金额(元)</div>
        </div>
        <div class="item item-1">
          <div class="name">{{ rankingTop[0].name }}</div>
          <div class="money">{{ rankingTop[0].money }}</div>
          <div class="label">充值金额(元)</div>
        </div>
        <div class="item item-3">
          <div class="name">{{ rankingTop[2].name }}</div>
          <div class="money">{{ rankingTop[2].money }}</div>
          <div class="label">充值金额(元)</div>
        </div>
      </div>
      <div class="ranking-list">
        <div class="ranking-table">
          <table>
            <thead>
            <tr>
              <th>排名</th>
              <th>会员姓名</th>
              <th>充值金额(元)</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in rankingList">
              <td>{{ index + 4 }}</td>
              <td class="name">{{ item.name }}</td>
              <td class="money">{{ item.money }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--充值-->
    <recharge v-model="rechargeShow" :memberInfo="info" @success="getInfo"/>
  </div>
</template>
<script>
import {getMemberInfo} from "@/api/member";
import {call, dateDiff, dateFormat, nameStar} from "@/common/utils";
import {decryptByDESModeCBC} from "@/common/utils/des";
import listScroll from '@/components/listScroll'
import packetTime from "@/components/packetTime/index.vue";
import recharge from './components/recharge'
import {bringInList, qrcodeList, slideshow} from "@/api/common";
import {rechargeRanking} from "@/api/wallet";
import {mapGetters} from "vuex";
export default {
  name: "index",
  components: {
    listScroll,
    packetTime,
    recharge
  },
  data() {
    return {
      carouselIndex: 0,
      inter: null,
      times: '',
      memberTypes: {
        '临时会员': 2,
        '白银会员': 10,
        '黄金会员': 11,
        '钻石会员': 22,
        '黑卡会员': 33,
        '至尊会员': 44,
        '暗夜至尊': 55,
      },
      info: {},
      bannerList: [],
      rankingTop: [],
      rankingList: [],
      bringInfo: null,
      bringList: [],
      qrcodeList: [],
      qrcodeTypes: {
        1: {label: '官方公众号', img: require('@/assets/images/wallet/icon-gzh.png')},
        2: {label: '电竞蜂小程序', img: require('@/assets/images/wallet/icon-weapp.png')},
        3: {label: '官方抖音号', img: require('@/assets/images/wallet/icon-dy.png')}
      },
      packetTimeShow: false,
      consumeLogShow: false,
      couponShow: false,
      rechargeShow: false
    }
  },
  computed: {
    ...mapGetters(['memberInfo'])
  },
  methods: {
    dateFormat,
    call,
    // 会员信息
    getInfo() {
      this.getMemberDetail().then((info) => {
        this.$store.dispatch('login', Object.assign({}, this.memberInfo || {}, {
          memberId: info.memberId,
          shopName: info.shopName
        }))
        info.endTime = info.endTime ? dateFormat(info.endTime, 'MM/dd hh:mm'): ''
        this.info = info
        let now = this.info.systemTime
        let fun = () => {
          this.times = dateDiff(new Date(this.info.onlineTime), new Date(now));
        }
        fun();
        this.inter = setInterval(() => {
          now += 1000
          fun();
        }, 1000);
      })
    },
    // 充值排行
    getRanking() {
      if (this.inner) {
        clearTimeout(this.inner)
      }
      rechargeRanking().then(res => {
        let data = (res.data || []).map(item => {
          item.name = nameStar(item.name)
          return item
        })
        this.rankingTop = data.slice(0, 3)
        this.rankingList = data.slice(3)
      })
    },
    // 广告图
    getSlideshow() {
      slideshow({type: 10}).then(res => {
        if (res.code == 200) {
          this.bannerList = res.data
        }
      });
    },
    // 二维码
    getQrcodeList() {
      qrcodeList().then(res => {
        this.qrcodeList = res.data || []
      })
    },
    // 招聘
    getBringInList() {
      bringInList({parentId: 2, pageNum: 1, pageSize: 100}).then(res => {
        this.bringList = res.rows || []
        if (this.bringList.length) {
          this.bringInfo = {
            positionName: this.bringList.map(item => item.positionName).join('、')
          }
        }
      })
    },
    checkOut() {
      window.ipc.send('window-check-show')
    },
    toPage(path) {
      this.$router.push(path)
    }
  },
  created() {
    this.getInfo()
    this.getSlideshow()
    this.getRanking()
    this.getBringInList()
    this.getQrcodeList()
  },
  destroyed() {
    clearInterval(this.inter)
    if (this.inner) {
      clearTimeout(this.inner)
    }
  }
}
</script>

<style lang="scss">
@import "index";
</style>
